/**
* @Author: 李晨光
* @Date: 2019/12/13
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/13
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="Area">
    <mu-dialog
      width="360"
      transition="slide-bottom"
      fullscreen
      class="searchContainer"
      :open.sync="open"
    >
      <mu-appbar color="primary" class="lan-header search-header">
        <slot name="dialog-header">
          <mu-button icon slot="left" @click="closeDialog">
            <i class="iconfont angle-left iconangle-left"></i>
            <span class="lan-header-back">返回</span>
          </mu-button>
          {{title}}
        </slot>
      </mu-appbar>
      <div style="height:calc(100% - 50px);overflow:auto">
        <mTree
          v-show="tree.data.length"
          :data="tree.data"
          :props="tree.defaultProps"
          :clickableConditions="tree.clickableConditions"
          @click="confirm"
        ></mTree>
        <NoData v-if="!tree.data.length&&!tree.loading" />
      </div>
    </mu-dialog>
  </div>
</template>

<script>
  import mTree from '@/tree/mTree'
  export default {
    name: 'Area',
    components: {
      mTree
    },
    props: {
      title: {
        type: String,
        default: "选择区域"
      },
      // 选择结果
      checked: {
        type: Object,
        default: () => {
          return {};
        }
      },
      open: {
        type: Boolean,
        default: false
      },
      currentProject: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    model: {
      prop: "checked",
      event: "change"
    },
    data() {
      return {
        tree: {
          loading: false,
          defaultProps: {
            id: "id",
            name: "name",
            children: "children"
          },
          clickableConditions: {
            all: {
              //所有的是否可以点击
              enable: true
            },
            part: {
              //部分的可以点击的条件
              prop: "orgType",
              value: [1]
            }
          },
          data: []
        }
      }
    },
    computed: {},
    created() {
      this.initPage();
    },
    mounted() {
    },
    watch: {
      currentProject: {
        handler(newVal, oldVal) {
          this.initPage();
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      // 打开
      openDialog() {
        this.$emit("open", true);
      },
      // 关闭
      closeDialog() {
        this.$emit("close", true);
      },
      // 确认回调
      confirm(ev) {
        this.$emit("change", ev);
        this.$emit("confirm", true);
      },
      initPage() {
        this.tree.loading = true;
        this.$openLoading();
        let params = {
          orgId: this.currentProject.value
        };
        this.$A.Go("get", "/safety/projectArea/tree", params).then(
          response => {
            this.$closeLoading();
            this.tree.loading = false;
            this.tree.data =
              response.body && response.body.length ? response.body : [];
          },
          err => {
            this.$closeLoading();
            this.tree.loading = false;
            console.log(err);
          }
        );
      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
</style>
